<template>
  <div class="niuniu">
    <Tabs :options="options" :tab="tab" />

    <div class="table">
      <div class="title-box">
        <div class="title">闲A</div>
        <div class="title">闲B</div>
        <div class="title">庄C</div>
      </div>

      <div class="content" ref="table">
        <div>
          <div class="row">
            <div v-for="(item, idx) in getCols()" class="label" :key="item" :class="getCss(idx, 0)">
              {{ getTxt(idx, 0) }}
            </div>
          </div>

          <div class="row">
            <div v-for="(item, idx) in getCols()" class="label" :key="item" :class="getCss(idx, 1)">
              {{ getTxt(idx, 1) }}
            </div>
          </div>

          <div class="row">
            <div v-for="(item, idx) in getCols()" class="banker" :key="item">
              {{ getTxt(idx, 2) }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Tabs from './tabs.vue'
import { GAME_STATUS_CODE, LotterCodeEnum } from '@/enum'
import { useGameStore } from '@/stores/game'
import { findTrendChart } from '@/api'

export default {
  name: 'Niuniu',

  components: { Tabs },

  data() {
    return {
      tab: 3,
      options: [{ label: '庄闲图', value: 3 }],
      list: [],
      gameStore: useGameStore(),
    }
  },

  computed: {
    drawingStatus() {
      return this.gameStore.drawingStatus
    },
  },

  methods: {
    getCols() {
      let col = this.list.length
      col = col < 15 ? 15 : col
      return col
    },

    async getList() {
      try {
        const { data } = await findTrendChart({
          lotteryCode: LotterCodeEnum.pcnn,
          type: this.tab,
        })
        this.list.splice(0, this.list.length)

        this.list = data.data

        this.$nextTick(() => {
          let target = this.$refs.table
          this.$refs.table.scrollTo(target.scrollWidth, 0)
        })
      } catch (e) {
        console.log(e)
      }
    },

    getTxt(parent, child) {
      return this.list?.[parent]?.valueWrap?.[child]?.[0]
    },

    getCss(parent, child) {
      const result = this.list?.[parent]?.valueWrap?.[child]?.[1]

      if (result === 'FLAT') return 'flat'
      else if (result === 'WIN') return 'win'
      else if (result === 'LOSS') return 'loss'

      return ''
    },
  },

  created() {
    this.getList()
  },

  watch: {
    drawingStatus(n) {
      if (!n) return
      if (n.code === GAME_STATUS_CODE.kaijiang.code) {
        setTimeout(() => {
          this.getList()
        }, 1000);
      }
    },
  },
}
</script>

<style lang="less" scoped>
@borderColor: rgba(54, 56, 87, 1);

.table {
  position: relative;
  display: flex;
  border: 1px solid @borderColor;
  background-color: #222635;

}

.title-box {
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  font-size: 12px;
  z-index: 2;

  .title {
    height: 22px;
    line-height: 22px;
    color: #fff;
    background: rgba(79, 42, 166, 1);
    border-bottom: 1px solid rgba(54, 56, 87, 1);

    &:nth-last-of-type(1) {
      border-bottom: none;
    }
  }
}

.content {
  padding-left: 34px;
  overflow-x: auto;
  scroll-behavior: smooth;

  &::-webkit-scrollbar {
    display: none;
  }

  &::-webkit-scrollbar-thumb {
    display: none;
  }

  >div {
    width: max-content;
  }
}

.row {
  display: flex;
  border-bottom: 1px solid @borderColor;
  font-size: 10px;

  >div {
    width: 30px;
    height: 22px;
    line-height: 22px;
    box-sizing: border-box;
    border-right: 1px solid @borderColor;
    text-align: center;

    &:nth-last-of-type(1) {
      border-right: none;
    }

    &.win {
      color: rgb(85, 140, 253);

    }

    &.loss {
      color: rgb(255, 91, 81);
    }

    &.flat {
      color: rgb(129, 126, 135);
    }

    &.banker {
      color: rgb(40, 165, 76);
    }
  }
}
</style>
